import { useCallback, useState } from "react"
import React from "react"

// 使用 React.memo 高阶组件对 CountProps 进行包装，以进行浅层比较。
// 这意味着只有 CountProps 组件的属性发生变化时，才会重新渲染。
// 通过这种方式，可以避免在父组件重新渲染时不必要地重新渲染子组件 CountProps。
const CountProps = React.memo(function (props) {
  // 使用memo
  const { sub } = props
  console.log("子组件被渲染")
  return <button onClick={sub}>子组件来减1</button>
})

const Demo = function () {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState("message")
  // const sub = function (){
  //   setCount(count - 1)
  // }

  const sub = useCallback(
    function foo() {
      setCount(count - 1)
    },
    [count]
  )

  return (
    <div>
      <h5>count: {count}</h5>
      <button onClick={sub}>减1</button>
      <CountProps sub={sub} />
      <h5>
        <span>{message}</span>
        <button onClick={() => setMessage(Math.random() + "")}>更改文本</button>
      </h5>
    </div>
  )
}

export default Demo
